<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Week3 Homework</title>
    <!-- 引入bootstrap css样式 -->
    <link href="./css/bootstrap-3.3.7.css" rel="stylesheet" type="text/css">
    <link href="./css/offcanvas.css" rel="stylesheet">
    <!-- 引入我的样式 -->
    <link href="./css/my.css" rel="stylesheet" type="text/css"/>
    <script src="./js/ie-emulation-modes-warning.js"></script>
    <!--[if lt IE 9]>
      		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    	<![endif]-->
</head>
<body>
	<!-- 页头开始 -->
    <div class="headbg">
        <div class="container">
            <!-- 页头左侧外链接开始 -->
            <div class="external_link">
                <ul>
                    <li><a href="#">小米商城</a></li>
                    <li><a href="#">MIUI</a></li>
                    <li><a href="#">loT</a></li>
                    <li><a href="#">云服务</a></li>
                    <li><a href="#">有品</a></li>
                    <li><a href="#">小爱开放平台</a></li>
                    <li><a href="#">政企服务</a></li>
                    <li><a href="#">下载App</a></li>
                    <li><a href="#">Select Region</a></li>
                </ul>
            </div>
            <!-- 页头左侧外链接结束 -->
            <!-- =================================================================================== -->
            <!-- 页头右侧登录开始 -->
            <div class="external_car">购物车(0)</div>
            <div class="external_link external_right">
                <ul>
                    <li><a href="#">登陆</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
            <!-- 页头右侧登录结束 -->
            <div class="clear"></div>
        </div>
    </div>
    <!-- 页头结束 -->  
    <!-- ========================================================================================== -->
    <div class="container">
        <!-- 导航栏开始 -->
        <div class="nav">
            <div class="nav_left">
                <img src="./images/logo.jpg">
			</div>
            <div class="nav_mid">
                <ul>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">空调</a></li>
                    <li><a href="#">新品</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="nav_right">
                <span></span>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <!-- =========================================================================== -->
        <!-- 导航栏下轮播开始 -->
        <!-- Wrapper for slides -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./images/slideshow1.jpg" alt="小米笔记本">
                    <div class="carousel-caption">
                        小米笔记本
                    </div>
                </div>
                <div class="item">
                    <img src="./images/slideshow2.jpg" alt="小米米家智能门锁">
                    <div class="carousel-caption">
                        小米米家智能门锁
                    </div>
                </div>
                <div class="item">
                    <img src="./images/slideshow3.jpg" alt="小米MIX 3">
                    <div class="carousel-caption">
                        小米MIX 3
                    </div>
                </div>
                <div class="item">
                    <img src="./images/slideshow4.jpg" alt="回馈专场">
                    <div class="carousel-caption">
                        回馈专场
                    </div>
                </div>
                <div class="item">
                    <img src="./images/slideshow5.jpg" alt="小米电视">
                    <div class="carousel-caption">
                        小米电视
                    </div>
                </div>
            </div>
            <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		        <span class="sr-only">Previous</span>
		    </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		        <span class="sr-only">Next</span>
		    </a>
        </div>
        <div class="clear"></div>
        <!-- ========================================================================================== -->
        <!-- 商品明细展示开始 -->
        <div class="row">
		  	<div class="col-md-4">
				<div class="thumbnail">
			  		<img src="images/phone_11.jpg" alt="">
			  		<div class="caption">
						<h3>小米8 青春版 4GB+64GB</h3>
						<p>潮流镜面渐变色，2400万自拍旗舰</p>
					</div>
				</div>
		  	</div>

		 	<div class="col-md-4">
				<div class="thumbnail">
					<img src="images/phone_12.jpg" alt="">
					<div class="caption">
						<h3>小米8 屏幕指纹版 8GB+128GB</h3>
						<p>全球首款压感屏幕指纹，双频GPS超精准定位</p>
			  		</div>
				</div>
		  	</div>
			
			<div class="col-md-4">
				<div class="thumbnail">
			  		<img src="images/phone_13.jpg" alt="">
			  		<div class="caption">
						<h3>小米8 SE 6GB+64GB</h3>
						<p>AI 超感光双摄，三星 AMOLED 屏幕</p>
			  		</div>
				</div>
			</div>
		
			<div class="col-md-4">
				<div class="thumbnail">
			  		<img src="images/phone_21.jpg" alt="">
			  		<div class="caption">
						<h3>小米6X 6GB+128GB</h3>
						<p>轻薄美观的拍照手机</p>
			  		</div>
				</div>
		  	</div>
			
			<div class="col-md-4">
				<div class="thumbnail">
			  		<img src="images/phone_22.jpg" alt="">
			  		<div class="caption">
						<h3>小米MIX 2S 8GB+256GB</h3>
						<p>骁龙845 年度旗舰处理器，艺术品般陶瓷机身</p>
			  		</div>
				</div>
		  	</div>
			
			<div class="col-md-4">
				<div class="thumbnail">
			  		<img src="images/phone_23.jpg" alt="">
			  		<div class="caption">
						<h3>红米6 Pro 3GB+32GB</h3>
						<p>高颜值大电量 红米旗舰</p>
			  		</div>
				</div>
		  	</div>
		</div>
		<!-- 分页效果 -->
		<nav aria-label="Page navigation" class="text-center">
		  	<ul class="pagination  pagination-lg">
				<li class="disabled">
			  		<a href="#" aria-label="Previous">
						<span aria-hidden="true">&laquo;</span>
			  		</a>
				</li>
				<li class="active"><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li>
			  		<a href="#" aria-label="Next">
						<span aria-hidden="true">&raquo;</span>
			  		</a>
				</li>
		  	</ul>
		</nav>
        <!-- 商品明细展示结束 -->
        <!-- ========================================================================================== -->
        <!-- 页脚开始 -->
		<div id="footer">
			<H4 class="text-center">&copy; Company 2018 前端技术学起来容易用起来难</H4>
		</div>
        <!-- 页脚结束 -->
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</body>
</html>
